import { Button, Form, Input, Select, Space } from "antd";
import { Article } from "../../../../types/content/article";
import { useEffect, useState } from "react";
import { Tag } from "../../../../types/content/tag";
import { queryAllTagList } from "@/api/content/tag";
interface IProps {
  onChange: (form: Article.Query) => void;
}
export default function QueryForm({ onChange }: IProps) {
  const [form] = Form.useForm();
  const [tagList, setTagList] = useState<Tag.Row[]>([]);
  /**
   * 获取标签列表
   */
  const getTagsList = async () => {
    const res = await queryAllTagList();
    if (res.code === 200) {
      setTagList(res.data || []);
    }
  };
  useEffect(() => {
    getTagsList();
  }, []);
  return (
    <Form
      layout="inline"
      name="articleQuery"
      onFinish={(form) => {
        onChange(form);
      }}
      autoComplete="off"
    >
      <Form.Item<Article.Query> label="标题" name="title">
        <Input allowClear size="middle"/>
      </Form.Item>

      <Form.Item<Article.Query> label="摘要" name="summary">
        <Input allowClear size="middle"/>
      </Form.Item>
      <Form.Item<Article.Query> label="标签" name="tagId">
        <Select style={{ width: 200 }} allowClear size="middle">
          {tagList.map((tag) => (
            <Select.Option key={tag.id} value={tag.id}>
              {tag.name}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" size="middle">
            查询
          </Button>
          <Button
            htmlType="button"
            size="middle"
            onClick={() => {
              form.resetFields();
              form.submit();
            }}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
}
